import {View} from "@tarojs/components";
import DefaultMap from "./defaultMap";
import {useEffect, useState} from "react";
import AreaMap from "./areaMap";

export default ({initData,seatData,renderData,show=false,selectSeat=[]})=>{
  const [style,setStyle]=useState({})
  const [previewStyle,setPreviewStyle]=useState({})

  useEffect(() => {
    const styleData={
      boxScale:0,
      scale:0,
      top:0,
      left:0
    }
    if(initData.minMapSize.w/initData.minMapSize.h>initData.width/initData.height){
      styleData.scale=initData.minMapSize.h/initData.height
      styleData.left=(initData.minMapSize.w-initData.width*styleData.scale)/2
    }else{
      styleData.scale=initData.minMapSize.w/initData.width
      styleData.top=(initData.minMapSize.h-initData.height*styleData.scale)/2//400 200 50 0.5 0.25
    }
    styleData.width=initData.width*styleData.scale
    styleData.height=initData.height*styleData.scale
    if(initData.boxW/initData.boxH>initData.width/initData.height){
      styleData.boxW=initData.boxW*styleData.height/initData.boxH
      styleData.boxH=styleData.height
    }else{
      styleData.boxH=initData.boxH*styleData.width/initData.boxW
      styleData.boxW=styleData.width
    }
    setStyle(styleData)
  }, [initData]);

  useEffect(() => {
    const scale=renderData.scale/initData.transformData.scale
    const previewStyleData={
      left:(initData.transformData.x*scale-renderData.x)*style.scale/renderData.scale+style.left,
      top:(initData.transformData.y*scale-renderData.y)*style.scale/renderData.scale+style.top,
      width:style.boxW/scale,
      height:style.boxH/scale
    }
    if(previewStyleData.width>style.width){
      previewStyleData.width=style.width
      previewStyleData.left=style.left
    }else{
      previewStyleData.left-=(style.boxW-style.width)/2
    }
    if(previewStyleData.height>style.height){
      previewStyleData.height=style.height
      previewStyleData.top=style.top
    }else{
      previewStyleData.top-=(style.boxH-style.height)/2
    }
    setPreviewStyle(previewStyleData)
  }, [renderData,style]);

  return (
    <View className='min-map' style={`width:${initData.minMapSize.w}px;height:${initData.minMapSize.h}px;${show?'':'opacity:0;transition:opacity 2s'}`}>
      <View className='preview-box' style={`left:${previewStyle.left}px;top:${previewStyle.top}px;width:${previewStyle.width}px;height:${previewStyle.height}px;`}></View>
      <View style={`position:absolute;transform:scale(${style.scale}) translate(0,0);transform-origin:0 0;left:${style.left}px;top:${style.top}px;`}>
        <View style={`padding:${initData.padding[0]}px ${initData.padding[1]}px ${initData.padding[2]}px ${initData.padding[3]}px`}>
          {
            initData.isArea&&
            <AreaMap selectSeat={selectSeat} initData={initData} seatData={seatData}></AreaMap>
          }
          {
            !initData.isArea&&
            <DefaultMap selectSeat={selectSeat} initData={initData} seatData={seatData}></DefaultMap>
          }
        </View>
      </View>
    </View>
  )
}
